@color:#cc5252;
.page.lucky{
  background-color: @color;
  color: #fff;
  .hd{
    margin: 30rem/16 0 0 50rem/16 ;
    .ruler{
      margin-left: 35rem/16;
      &,&:visited,&:link{
        color: #fff;
      }
    }
    h1.title{
      border-right: 1px solid #bf3737;
      font-size: 30rem/16;
    }
    p{
      font-size: 14rem/16;
    }
    i{
      width: 180*0.9rem/16;
      height: 210*0.9rem/16;
      display: inline-block;
      background-size: 180*0.9rem/16 210*0.9rem/16;
      background-image: url(../../images/luck_top_icon.png);
      position: absolute;
      right: 0;
      top:0;
    }
  }
  .chance{
    text-align: center;
    margin: 5rem/16;
    span{
      color: #e9af14;
    }
  }
  .cont{
    width: 250rem/16;
    height: 180rem/16;
    margin: 20rem/16 auto;
    background-color: #fffbe2;
    position: relative;
    border: 10rem/16 solid #fff;
    color:#cc5252;
    font-weight: bold;
    font-size: 30rem/16;
    text-align: center;
    line-height: 180rem/16;
    position: relative;
    .cover{
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: #b3b3b3;
      position: absolute;
      left: 0;
      top: 0;
      .sheet{
        width: 100rem/16;
        position: absolute;
        top:0;
        left: 0;
        z-index: 3;
      }
      &.open-leave{
        opacity: 0;
        transition:opacity .2s;
      }
      &:after{
        content: ' ';
        display: inline-block;
        width:350rem/16;
        height:350rem/16;
        background-size: 70.5rem/16 23rem/16;
        background-image: url(../../images/luck_cover_icon.png);
        transform: rotate(45deg) translate(-5rem,-1rem);
      }
    }
    &:before{
      position: absolute;
      content: ' ';
      top: -13rem/16;
      left: -9rem/16;
      width: 268rem/16;
      height: 4rem/16;
      background-size: 8rem/16 4rem/16;
      display: inline-block;
      background-image: url(../../images/quan_side_icon.png);
    }
    &:after{
      position: absolute;
      content: ' ';
      bottom: -13rem/16;
      transform: rotate(180deg);
      left: -9rem/16;
      width: 268rem/16;
      height: 5rem/16;
      background-size: 8rem/16 4rem/16;
      display: inline-block;
      background-image: url(../../images/quan_side_icon.png);
    }
  }
  .button-view{
    text-align: center;
    .weui_btn.weui_btn_mini.weui_btn_default{
      background-color: #f7e5e5;
      color:#cc5252;
      padding: 5rem/16 10rem/16;
      width: 100rem/16;
      border-radius: 20rem/16;
      &:after{
        border-radius: 40rem/16;
      }
      &:first-child{
        margin-right: 30rem/16;
      }
      &:last-child{
        margin-left: 30rem/16;
      }
    }
  }
  .info{
    margin: 20rem/16 0;
    height: 100rem/16;
    background-color: #ae4646;
    text-align: center;
    overflow: scroll;
    font-size: 0.9rem;
    span{
      color:red;
    }
  }
  .prize-title{
    text-align: center;
    margin: 10rem/16 0;
  }
  .prize-con{
    margin: 10rem/16 auto 10rem/16 auto;
    text-align: center;
    img{
      margin: 5rem/16;
      border: 4rem/16 solid #fff;
      border-radius: 4rem/16;
      width: 0.8*175/2rem/16;
      height: 0.8*146/2rem/16;
    }
  }
  .download{
    text-align: center;
    height: 11rem;
    margin: 2rem auto 2rem auto;
    background-color: #ae4646;
    padding-top: 1.5rem;
    &:before{
      margin: 0 auto 1rem auto;
      content:'';
      display: block;
      width: 254rem/40;
      height: 68rem/40;
      background-size: 254rem/40 68rem/40;
      background-image: url(../../images/logo.png);
    }
    .download-btn{
      display: block;
      margin: 0.5rem auto;
      width: 30%;
      color: #fff;
      background-color: #52b3eb;
      padding: 0.8rem 2.5rem;
      position: relative;
      border-radius: 0.5rem;
      &:before{
        content: ' ';
        display: block;
        width: 65rem/32;
        height: 51rem/32;
        background-size: 65rem/32 51rem/32;
        background-image:url(../../images/get_money_android_icon.png);
        position: absolute;
        left: 0;
        bottom: 0.2rem;
      }
    }
    .ios-des{
      font-size: 0.8rem;
      color: #fff;
      padding-bottom: 1rem;
    }
  }
  .mask{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    z-index: 10;
    &:before{
      content: ' ';
      width: 330rem/32;
      height:228rem/32;
      background-size: 330rem/32 228rem/32;
      background-image: url(../../images/share_tips_icon.png);
      position: absolute;
      right: 0;
      top:0;
    }
  }
}